<template>
    <div>
        <div class="demoseamless-scrollBox">
            <div class="title-container">
                <div class="title">数据展示</div>
            </div>
            <div class="table-header">
                <div class="header">
                    <el-row>
                        <el-col :span="6" class="center">
                            <div>车次</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div>目的地</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div>发车时间</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div>状态1</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <vue3-seamless-scroll class="scroll-wrap border text-color" :hover="true" :step="0.4" :wheel="true"
                :isWatch="true" :limitScrollNum="1" :list="listTwo">
                <div v-if="listTwo.length > 0" class="el-box">
                    <el-row v-for="(item, i) of listTwo" :key="i" class="el-row">
                        <el-col :span="6" class="center">
                            <div>{{ item.trainNumber }}</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div>{{ item.destination }}</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div style="width: 30px;">{{ item.departureTime }}</div>
                        </el-col>
                        <el-col :span="6" class="center">
                            <div style="width: 30px;">{{ item.status }}</div>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="listTwo.length == 0"
                    style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
                    暂无预测记录</div>
            </vue3-seamless-scroll>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import { vue3ScrollSeamless } from "vue3-seamless-scroll";
import { useRoute } from "vue-router";
const route = useRoute();
let { query } = route;//解构
console.log("query1111111111===", route);
console.log("query===", query);
const list = ref([
    {
        title: "Vue3.0 无缝滚动组件展示数据第1条阿萨德刚富商大贾防守打法个",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第2条水电费感受到",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第6条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第7条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第8条",
        date: Date.now(),
    },
    {
        title: "Vue3.0 无缝滚动组件展示数据第9条",
        date: Date.now(),
    },
]);
const listTwo = reactive([
    { trainNumber: 'G1234', destination: '北京南zxcvsdzvf啊的说法撒的发生懂法守法说法', departureTime: '09:00', status: '准点' },
    { trainNumber: 'G5678', destination: '上海虹桥', departureTime: '09:15', status: '准点' },
    { trainNumber: 'D4321', destination: '广州南', departureTime: '09:30', status: '晚点' },
    { trainNumber: 'G8765', destination: '成都东', departureTime: '09:45', status: '准点' },
    { trainNumber: 'G9876', destination: '西安北', departureTime: '10:00', status: '准点' },
    { trainNumber: 'D6543', destination: '深圳北', departureTime: '10:15', status: '准点' },
    { trainNumber: 'G2345', destination: '重庆北', departureTime: '10:30', status: '晚点' },
    { trainNumber: 'G1111', destination: '天津西', departureTime: '10:45', status: '准点' },
    { trainNumber: 'G2222', destination: '南京南', departureTime: '11:00', status: '晚点' },
    { trainNumber: 'D3333', destination: '杭州东', departureTime: '11:15', status: '准点' },
    { trainNumber: 'G4444', destination: '武汉', departureTime: '11:30', status: '准点' },
    { trainNumber: 'G5555', destination: '济南西', departureTime: '11:45', status: '准点' },
    { trainNumber: 'D6666', destination: '长沙南', departureTime: '12:00', status: '晚点' },
    { trainNumber: 'G7777', destination: '南昌西', departureTime: '12:15', status: '准点' },
    { trainNumber: 'G8888', destination: '沈阳北', departureTime: '12:30', status: '准点' },
    { trainNumber: 'D9999', destination: '福州南', departureTime: '12:45', status: '准点' },
    { trainNumber: 'G1010', destination: '哈尔滨西', departureTime: '13:00', status: '晚点' }

]);
const classOptions = reactive({
    step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
    limitMoveNum: listTwo.length,//无缝滚动列表元素的长度，一般设置为列表的长度
    direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
});
onMounted(() => {
    console.log("router.query==", route.query)
})
</script>
<style scoped>
.demoseamless-scrollBox {
    width: 50%;
    height: 100%;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin-bottom: 20px;
}

.title {
    font-size: 19px;
}

.table-header {
    font-family: Arial, sans-serif;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid rgb(13, 162, 221);
    background-color: rgba(3, 137, 174, 0.5);
}

.header {
    width: 100%;
    font-size: 16px;
}

.scroll-wrap {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background-color: rgb(0, 5, 38, 0.5);
    font-size: 15px;
}

.scroll-wrap .el-box .el-row {
    /* height: 40px; */
    padding: 5px 0px;
    border-bottom: 1px solid red;
}

.border {
    border: 1px solid rgb(13, 162, 221);
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;

}

.text-color {
    color: rgb(128, 250, 124);
}
</style>